<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">

    <style>
        .header {
            height: 32px;
            line-height: 32px;
            background-color: #f2f2f2;
            padding: 0 150px;
        }

        .top {
            width: 1000px;
            margin: 0 auto;
        }

        .header .top>ul>li {
            font-size: 14px;
            float: left;
            margin-right: 15px;
            color: #999999;
        }

        .header ul li a {
            color: #999;
        }


        .head_right li:hover img {
            transform: rotate(180deg);
        }

        .head_right li:first-child {
            width: 80px;
        }

        .head_right .hold:hover,
        .head_right li:first-child:hover {
            background: #fff;
            color: #f00;
        }

        .head_right li:first-child:hover .select {
            display: block;
        }

        .head_right li .select {
            width: 90px;
            border: solid #999 1px;
            border-top: none;
            display: none;
            color: #f00;
            text-align: center;
        }

        .head_right li .select li {
            font-size: 12px;
            width: 100%;
            line-height: 20px;
            padding: 5px 5px 0;
        }

        .head_right li .select li a:hover {
            text-decoration: underline;
            color: #f00;
        }

        .head_right .phone {
            background: url(../images/nav/手机\ \(1\).png) no-repeat left;
            padding-left: 20px;
        }

        .head_right .phone:hover {
            background: url(../images/nav/手机.png) no-repeat left;
        }

        .head_right .web_nav {
            background: url(../images/nav/菜单.png) no-repeat left;
            padding-left: 20px;
            background-size: 20px;
            width: 100px;
            position: relative;
        }

        .head_right .web_nav:hover {
            background: #fff url(../images/nav/菜单\(1\).png) no-repeat left;
            background-size: 20px;
        }

        .website {
            /* width: 1200px; */
            height: 200px;
            position: absolute;
            right: 0;
            border: solid #eeeeee 1px;
            border-top: none;
            display: none;
            padding: 15px;
            box-sizing: border-box;
        }

        .head_right .web_nav:hover .website {
            display: block;
        }

        .website .hotspot div:first-child,
        .website .maket div:first-child,
        .website .fingerpost div:first-child {
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            font-weight: 600;
            color: #f56a00;
        }

        .website .hotspot .item ul {
            font-size: 8px;
            width: 100px;
            float: left;
        }

        .website .hotspot .item ul li a:hover,
        .website .maket .item2 ul li a:hover,
        .website .fingerpost ul li a:hover {
            color: #f00;
            text-decoration: underline;
        }
 
        .website .hotspot .item {
            width: 510px;
            height: 160px;
            float: left;
        }

        .website .maket {
            height: 100%;
            width: 410px;
            float: left;
            margin-top: -35px;
        }

        .website .maket ul {
            float: left;
        }

        .website .fingerpost {
            margin: -35px 0 0 20px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="top">
        <ul class="head_left fl_left">
            <li>喵，欢迎来天猫</li>
            <li><a href="">请登录</a></li>
            <li><a href="">免费注册</a></li>
        </ul>

        <ul class="head_right fl_right">
            <li>
                <span>我的淘宝</span>
                <img src="../images/nav/小三角down (1).png" alt="">
                <ul class="select">
                    <li><a href="">已买到的宝贝</a></li>
                    <li><a href="">已收藏的宝贝</a></li>
                </ul>
            </li>
            <li><a href="">购物车</a></li>
            <li><a href="">收藏夹</a></li>
            <li class="phone"><a href="">手机版</a></li>
            <li><a href="">淘宝网</a></li>
            <li class="hold">商家支持<img src="../images/nav/小三角down (1).png" alt=""></li>
            <li class="web_nav">
                <div>
                    <span>网站导航</span>
                    <img src="../images/nav/小三角down (1).png" alt="">
                </div>

                <ul class="website">
                    <li class="hotspot ">
                        <div>热点推荐 &nbsp;Hot</div>
                        <div class="item">
                            <ul>
                                <li><a href="">天猫超市</a></li>
                                <li><a href="" class="hot">喵鲜生</a></li>
                                <li><a href="">科技新品</a></li>
                            </ul>

                            <ul>
                                <li><a href="" class="hot">女装新品</a></li>
                                <li><a href="">酷玩街内衣</a></li>
                                <li><a href="">新品试美妆</a></li>
                            </ul>

                            <ul>
                                <li><a href="" class="hot">运动新品</a></li>
                                <li><a href="" class="hot">时尚先生</a></li>
                                <li><a href="">精明妈咪</a></li>
                            </ul>

                            <ul>
                                <li><a href="">吃乐会</a></li>
                                <li><a href="" class="hot">企业采购</a></li>
                                <li><a href="">会员积分</a></li>
                            </ul>

                            <ul>
                                <li><a href="" class="hot">天猫国际</a></li>
                                <li><a href="">精明妈咪</a></li>
                                <li><a href="">品质频道</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="maket">
                        <div class="">
                            行业市场Market
                        </div>

                        <div class="item2">
                            <ul>
                                <li><a href="">美妆</a></li>
                                <li><a href="" class="hot">电器</a></li>
                                <li><a href="">女装</a></li>
                            </ul>

                            <ul>
                                <li><a href="" class="hot">配饰</a></li>
                                <li><a href="">医药</a></li>
                                <li><a href="">食品</a></li>
                            </ul>

                            <ul>
                                <li><a href="" class="hot">母婴</a></li>
                                <li><a href="" class="hot">家装</a></li>
                                <li><a href="">运动</a></li>
                            </ul>

                            <ul>
                                <li><a href="">箱包</a></li>
                                <li><a href="" class="hot">内衣</a></li>
                                <li><a href="">男鞋</a></li>
                            </ul>

                            <ul>
                                <li><a href="" class="hot">女鞋</a></li>
                                <li><a href="">男装</a></li>
                                <li><a href="">汽车</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="fingerpost fl_left">
                        <div>
                            服务指南Help
                        </div>
                        <ul>
                            <li><a href="">帮助中心</a></li>
                            <li><a href="">品质保障</a></li>
                            <li><a href="">特色服务</a></li>
                            <li><a href="">7天退换货</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
        </ul>
    </div>

    </div>
</body>

</html>